﻿@using PersonBlog.Model;
@using PersonBlog.Models;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";

    AgendaManageEntity Schedule = ViewBag.Schedule == null ? new AgendaManageEntity() : ViewBag.Schedule;

    string EventList = ViewBag.EventList == null ? null : ViewBag.EventList;
}
<link href="~/css/fullcalendar.css" rel="stylesheet" />
<link href="~/css/fullcalendar.print.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
<script src="~/js/layer/layer.js"></script>
<script type="text/javascript">
    /** 当天信息初始化 **/
    $(function () {
        var dayDate = new Date();
        var d = $.fullCalendar.formatDate(dayDate, "dddd");
        var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
        var lunarDate = lunar(dayDate);
        $(".alm_date").html(m + "&nbsp;" + d);
        $(".today_date").html(dayDate.getDate())
        $("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
        $("#alm_cnY").html(lunarDate.gzYear + "年&nbsp;" + lunarDate.gzMonth + "月&nbsp;" + lunarDate.gzDate + "日");
        $("#alm_cnA").html("【" + lunarDate.animal + "年】");
        var fes = lunarDate.festival();
        if (fes.length > 0) {
            $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
            $(".alm_lunar_date").show();
        } else {
            $(".alm_lunar_date").hide();
        }

    });
    /** calendar配置 **/
    $(document).ready(
	function () {
	    var eventList = $("#eventlist").val();
	    eventList = eval("[" + eventList + "]");
	    var date = new Date();
	    var d = date.getDate();
	    var m = date.getMonth();
	    var y = date.getFullYear();
	    $("#calendar").fullCalendar(
            {
                header: {
                    left: 'prevYear,nextYear',
                    center: 'title',
                    right: 'prev,next today'
                },
                buttonText: {
                    prev: "<span class='fc-text-arrow'>&lsaquo;上个月</span>",
                    next: "<span class='fc-text-arrow'>下个月&rsaquo;</span>",
                    prevYear: "<span class='fc-text-arrow'>&laquo;上一年</span>",
                    nextYear: "<span class='fc-text-arrow'>下一年&raquo;</span>"
                },
                editable: false,
                events: eventList,
                dayClick: function (dayDate, allDay, jsEvent, view) { //点击单元格事件
                    var d = $.fullCalendar.formatDate(dayDate, "dddd");
                    var m = $.fullCalendar.formatDate(dayDate, "yyyy年MM月dd日");
                    var today = $.fullCalendar.formatDate(dayDate, "yyyy-MM-dd");
                    var lunarDate = lunar(dayDate);

                    $(".alm_date").html(m + "&nbsp;" + d);
                    $(".today_date").html(dayDate.getDate())
                    $("#alm_cnD").html("农历" + lunarDate.lMonth + "月" + lunarDate.lDate);
                    $("#alm_cnY").html(lunarDate.gzYear + "年&nbsp;" + lunarDate.gzMonth + "月&nbsp;" + lunarDate.gzDate + "日");
                    $("#alm_cnA").html("【" + lunarDate.animal + "年】");
                    var fes = lunarDate.festival();
                    if (fes.length > 0) {
                        $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
                        $(".alm_lunar_date").show();
                    } else {
                        $(".alm_lunar_date").hide();
                    }
                    // 当天则显示“当天”标识
                    var now = new Date();
                    if (now.getDate() == dayDate.getDate() && now.getMonth() == dayDate.getMonth() && now.getFullYear() == dayDate.getFullYear()) {
                        $(".today_icon").show();
                    } else {
                        $(".today_icon").hide();
                    }
                    $("#StartTime").val(today);
                    $("#EndTime").val(today);
                    layer.open(
                        {
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['80%', '400px'], //宽高
                            content: $(".pop")
                        })
                },
                loading: function (bool) {
                    if (bool)
                        $("#msgTopTipWrapper").show();
                    else
                        $("#msgTopTipWrapper").fadeOut();
                }

            });
	});
    /** 绑定事件到日期下拉框 **/
    $(function () {
        $("#fc-dateSelect").delegate("select", "change", function () {
            var fcsYear = $("#fcs_date_year").val();
            var fcsMonth = $("#fcs_date_month").val();
            $("#calendar").fullCalendar('gotoDate', fcsYear, fcsMonth);
        });
    });


    function format(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
    }
</script>
<style>
    body { margin-top: 10px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; }

    .calendarWrapper { width: 1090px; margin: 0 auto 5px; }

    #calendar { width: 70%; background: #fff; }

    .calendarWrapper .rightSidePanel { width: 240px; }
    .dib { display: inline-block; }
    .fr { float: right; }
</style>


<input type="hidden" id="eventlist" value="@EventList" />
<div class="calendarWrapper">
    <div class="rightSidePanel mb50 fr">
        <div id="div_day_detail" class="h_calendar_alm">
            <div class="alm_date"></div>
            <div class="alm_content nofestival">
                <div class="today_icon"></div>
                <div class="today_date"></div>
                <p id="alm_cnD"></p>
                <p id="alm_cnY"></p>
                <p id="alm_cnA"></p>
                <div class="alm_lunar_date"></div>
            </div>
        </div>
        <a href="@Url.Action("List","AgendaManage")">更多日程</a>
    </div>
    <div id="calendar" class="dib"></div>

    <style>
        .tipGroup { margin-bottom: 10px; margin-top: 5px; }
        .tipGroup textarea { height: 50px; resize: none; }
        .tipGroup label { width: 10%; text-align: right; padding-right: 5px; }
        .tip { display: normal; width: 80%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #999; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
        .tip:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); }
        .tip::-moz-placeholder { color: #999; opacity: 1; }
        .tip:-ms-input-placeholder { color: #999; }
        .tip::-webkit-input-placeholder { color: #999; }
        .tip[disabled], .tip[readonly], fieldset[disabled] .tip { background-color: #eee; opacity: 1; }
        .tip[disabled], fieldset[disabled] .tip { cursor: not-allowed; }
    </style>
    <div class="pop" style="display:none">
        @using (Html.BeginForm("_AddSchedule", "AgendaManage", FormMethod.Post))
        {
            <div class="tipGroup">
                <label for="exampleInputEmail1">主题</label>
                @Html.TextBox("Topic", Schedule.Topic, new { @class = "tip", placeholder = "主题" })
                @*<input type="text" class="tip" placeholder="主题" value="@Schedule.Topic">*@
            </div>
            <div class="tipGroup">
                <label for="exampleInputPassword1">开始时间</label>
                <input type="text" class="tip" value="@Schedule.StartTime" id="StartTime" name="StartTime" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" placeholder="开始时间">
            </div>
            <div class="tipGroup">
                <label for="exampleInputEmail1">结束时间</label>
                <input type="text" class="tip" value="@Schedule.EndTime" id="EndTime" name="EndTime" onFocus="WdatePicker({ lang: 'zh-cn', minDate: '#F{$dp.$D(\'StartTime\')}', startDate: '#F{$dp.$D(\'StartTime\')}', dateFmt: 'yyyy-MM-dd'})" placeholder="结束时间">
            </div>
            <div class="tipGroup">
                <label for="exampleInputPassword1">描述</label>
                @Html.TextArea("InfoDesc", Schedule.InfoDesc, new { @class = "tip", placeholder = "详细描述", resize = "none" })
                @*<textarea class="tip" placeholder="详细描述" resize="none">@Schedule.InfoDesc</textarea>*@
            </div>
            <button type="submit" class="btn btn-success">提交</button>
        }
    </div>
</div>
